@tailwind base;
@tailwind components;
@tailwind utilities;

/* 全局样式 - 适合老年用户的大字体大按钮设计 */

@layer base {
  html {
    font-size: 16px; /* 基础字体大小 */
  }

  body {
    @apply bg-gray-50 text-gray-900;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  /* 大按钮样式 */
  .btn-large {
    @apply px-6 py-4 text-lg font-medium rounded-lg min-h-[60px] min-w-[120px];
  }

  /* 大输入框样式 */
  .input-large {
    @apply px-4 py-3 text-lg border-2 border-gray-300 rounded-lg focus:border-primary-500 focus:ring-2 focus:ring-primary-200;
  }

  /* 高对比度模式支持 */
  @media (prefers-contrast: high) {
    body {
      @apply bg-white text-black;
    }
  }

  /* 减少动画支持 */
  @media (prefers-reduced-motion: reduce) {
    * {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
  }
}

@layer components {
  /* 卡片组件 - 响应式 */
  .card {
    @apply bg-white rounded-xl shadow-sm border border-gray-200 p-4;
    @apply sm:p-6; /* 平板和桌面端增加内边距 */
  }

  /* 底部导航栏 - 移动端优化 */
  .bottom-nav {
    @apply fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 flex justify-around items-center;
    @apply px-2 py-3; /* 移动端较小的内边距 */
    @apply sm:px-4; /* 平板和桌面端增加内边距 */
  }

  /* 导航项 - 响应式字体大小 */
  .nav-item {
    @apply flex flex-col items-center justify-center font-medium;
    @apply text-xs; /* 移动端小字体 */
    @apply sm:text-sm; /* 平板和桌面端正常字体 */
  }

  .nav-item.active {
    @apply text-primary-600;
  }

  .nav-item.inactive {
    @apply text-gray-500;
  }

  /* 一键求救按钮 - 响应式大小 */
  .emergency-btn {
    @apply bg-red-600 hover:bg-red-700 text-white font-bold rounded-full shadow-lg;
    @apply py-3 px-6 text-lg; /* 移动端 */
    @apply sm:py-4 sm:px-8 sm:text-xl; /* 平板和桌面端 */
  }

  /* 响应式容器 */
  .responsive-container {
    @apply w-full px-4 mx-auto;
    @apply sm:max-w-2xl; /* 平板 */
    @apply md:max-w-4xl; /* 桌面端 */
    @apply lg:max-w-6xl; /* 大桌面端 */
  }

  /* 移动端优化网格 */
  .mobile-grid {
    @apply grid grid-cols-1 gap-4;
    @apply sm:grid-cols-2; /* 平板端双列 */
    @apply md:grid-cols-3; /* 桌面端三列 */
  }

  /* 移动端隐藏/显示 */
  .mobile-only {
    @apply block;
    @apply sm:hidden;
  }

  .desktop-only {
    @apply hidden;
    @apply sm:block;
  }
}

@layer utilities {
  /* 无障碍支持 */
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  /* 焦点样式 */
  .focus-visible {
    @apply outline-none ring-2 ring-primary-500 ring-offset-2;
  }
}